<template>
  <div class="navbar">
    <div class="logo">
      <img src="@/assets/logo.png" alt />
    </div>
    <div>
      <p>
        请输入内容
        <van-icon name="search" />
      </p>
    </div>
    <div>
      <img src="@/assets/default_img.jpg" alt />
      <p>下载App</p>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.navbar {
  height: 12vw;
  background: white;
  display: flex;
  .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 29.333vw;
    img {
      width: 80%;
    }
  }
  div:nth-child(2) {
    flex: 1;
    display: flex;
    align-items: center;
    margin: 0 1.333vw;
    p {
      font-size: 3.2vw;
      background: #f4f4f4;
      height: 6.933vw;
      line-height: 6.933vw;
      padding-left: 2.667vw;
      position: relative;
      width: 100%;
      border-radius: 3.467vw;
      color: #aaa;
      .van-icon {
        position: absolute;
        right: 2.667vw;
        top: 50%;
        transform: translate(0, -44%);
      }
    }
  }
  div:nth-child(3) {
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 6.4vw;
      height: 6.4vw;
    }
    p {
      padding: 1.333vw 2.667vw;
      margin: 0 2.133vw;
      border-radius: 0.8vw;
      background: #fb7299;
      color: white;
      font-size: 3.467vw;
    }
  }
}
</style>